<template>
  <template v-if="hasSection">
    <div v-for="item in sections" :key="item.id" class="wrap">
      <div class="head">
        <span class="title">{{ item.title }}</span>        
      </div>
      <div class="body">
        <list-scroller :ref="setEpScroller" scrollX>
          <ul class="section-list">
            <li
              v-for="ep in item.episodes"
              :key="ep.id"
              :class="{active: currentEpisodeId === ep.id}"
              @click="handleSection(ep)"
            >
              <cover-image class="cover" :src="ep.cover" size="@170w_106h" alt="ep.long_title"></cover-image>            
              <div class="desc">{{ ep.long_title || ep.title }}</div>
            </li>
          </ul>
        </list-scroller>
      </div>      
    </div>
  </template>
</template>

<script>
import { toRefs, computed, reactive, onMounted, onBeforeUpdate, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import ListScroller from '@/components/ListScroller'
import CoverImage from '@/components/CoverImage'
export default {
    name: 'BangumiSection',
    components: {
      ListScroller,
      CoverImage
    },
    props: {
      detailData: {
        type: Object
      }
    },
    setup(props) {
      const router = useRouter()
      const params = reactive({
        hasSection: computed(() => !!(props.detailData?.mediaInfo?.section ?? false)),
        sections: computed(() => props.detailData?.mediaInfo?.section ?? []),
        currentEpisodeId: computed(() => props.detailData?.epInfo?.id ?? -1)
      })

      // 设置多个ref的配置
      let epScrollers = []
      const setEpScroller = el => {
        if (el) {
          epScrollers.push(el)
        }
      }
      
      // 切换到选中的集数
      const focusEp = () => {
        const length = epScrollers.length
        for (let i = 0; i < length; i++) {
          const $el = epScrollers[i].listRef.querySelector('.active')
          if ($el) {
            epScrollers[i].scrollToElement($el, 300)
            break
          }
        }
      }

      const handleSection = item => {
        router.push({
          name: 'bangumi',
          params: {
            id: `ep${item.id}`
          }
        })
      }

      onMounted(() => {
        nextTick(() => {
          focusEp()
        })
      })

      onBeforeUpdate(() => {
        epScrollers = []
      })

      return {
        setEpScroller,
        ...toRefs(params),
        handleSection
      }
    }
}
</script>

<style lang="scss" scoped>
 .wrap{
    padding: {
      left: 10px;
      right: 10px;
    }
    @include border1px (#e7e7e7, 0 0 1px 0);
    .head{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .more{
    font-size: 13px;
    color: $color-text-secondary;
    .fa{
      font-size: 16px;
    }
  }
  .title{
    padding: {
      top: 10px;
      bottom: 10px;
    }
    font: {
      size: 16px;
      weight: 700;
    }
  }
  .section-list{
    white-space: nowrap;
    padding-bottom: 16px;
    li{
      display: inline-block;
      vertical-align: top;
      margin-right: 10px;
      color: $color-text-regular;
      width: 117px;
      &.active{
        color: $theme-color;
      }
    }
    .cover{
        padding-bottom: 106 / 170 * 100%;
    }
    .desc{
      padding-top: 4px;
      @include max-lines(2);
      font-size: 12px;      
      white-space: normal;
    }
  }
</style>